<template>
    <div class="container">
        <div class="header">
            <div class="bar">
                <h1>订单确认</h1>
                <div class="back" @click="back">
                    <i class="iconfont icon-left"></i>
                </div>
            </div>
            <div class="info">
                <div class="top">
                    <div class="pic">
                        <img src="@/assets/img/order_foodnum.png" alt="">
                    </div>
                    <div>
                        <h1>付款成功后，获取取餐码</h1>
                        <p>依据取餐码到前台取餐</p>
                    </div>
                </div>
                <div class="bottom">
                    <form>
                        <div>
                            <input class="radio_type" type="radio" name="type" id="radio1" checked="checked" />
                            <label for="radio1">打包带走</label>
                        </div>

                        <div>
                            <input class="radio_type" type="radio" name="type" id="radio2" />
                            <label for="radio2">在店里吃</label>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="head">
                <div class="pic">
                    <img src="@/assets/img/order_avatar.png" alt="">
                </div>
                <h1>包裹王同德店-商超</h1>
            </div>
            <div class="total">
                共N件商品
            </div>
            <div class="list">
                <orderItem v-for="item in 3"></orderItem>
            </div>
            <div class="fee">
                <div class="item bottom-border">
                    <span class="pack">打包费</span>
                    <span class="price">¥1.5</span>
                </div>
                <div class="item">
                    <span class="sum">合计金额</span>
                    <span class="jine">¥82</span>
                </div>
            </div>
        </div>
        <div class="pay-item">
            <div class="jine">
                <span class="heji">合计：</span>
                <span class="price">¥246.00</span>
            </div>
            <div class="btn">
                立即支付
            </div>
        </div>
    </div>
</template>

<script setup>
import orderItem from '@/components/order-item.vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const back = () => {
    router.push('/')
}
</script>

<style scoped lang="scss">
.container {
    background: #ddd;
    min-height: 100vh;

    .header {
        background: linear-gradient(180deg, rgba(36, 147, 241, 1) 0%, rgba(36, 147, 241, 1) 66.37%, rgba(255, 255, 255, 0) 100%);

        .bar {
            padding: 30px 15px 20px 15px;
            position: relative;
            text-align: center;
            color: #fff;

            h1 {
                font-size: 17px;
            }

            .back {
                position: absolute;
                left: 15px;
                top: 20px;

                .iconfont {
                    font-size: 30px;
                }
            }

        }

        .info {
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            margin: 0 15px;

            .top {
                padding: 20px 15px;
                display: flex;
                align-items: center;
                border: 1px solid #eee;

                .pic {
                    width: 60px;
                    height: 60px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                h1 {
                    font-size: 18px;
                    color: #333;
                    margin-bottom: 10px;
                }

                p {
                    font-size: 14px;
                    color: #999;
                }
            }

            .bottom {
                form {
                    height: 50px;
                    padding: 0 50px;
                    background: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    div{
                        display: flex;
                        align-items: center;
                        justify-content: center; 
                    }

                    label {
                        line-height: 50px;
                        display: inline-block;
                        margin-left: 5px;
                        margin-right: 15px;
                        font-size: 16px;
                        color: #333;
                    }

                    .radio_type {
                        box-sizing: border-box;
                        width: 20px;
                        height: 20px;
                        appearance: none;
                        position: relative;
                        margin: 0;
                    }

                    .radio_type:before {
                        box-sizing: border-box;
                        content: "";
                        width: 20px;
                        height: 20px;
                        border: 1px solid #bbb;
                        display: inline-block;
                        border-radius: 50%;
                    }

                    .radio_type:checked:before {
                        box-sizing: border-box;
                        content: "";
                        width: 20px;
                        height: 20px;
                        border: 1px solid #2493F1;
                        background: #2493F1;
                        display: inline-block;
                        border-radius: 50%;
                    }

                    .radio_type:checked:after {
                        content: "";
                        width: 8px;
                        height: 8px;
                        display: block;
                        position: absolute;
                        background: #fff;
                        border-radius: 50%;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .radio_type:checked+label {
                        color: #2493F1;
                    }
                }

                .item {
                    display: flex;
                    align-items: center;

                    .title {
                        font-size: 16px;
                        color: #333;
                        margin-left: 5px;

                        &.active {
                            color: #2493F1;
                        }
                    }

                    .checked {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        background: #2493F1;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .inc {
                            background: #fff;
                            border-radius: 50%;
                            width: 6px;
                            height: 6px;
                        }
                    }

                    .uncheck {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        box-sizing: border-box;
                        border: 1px solid #bbb;
                    }
                }
            }
        }
    }

    .content {
        margin: 15px;
        border-radius: 6px 6px 0 0;
        background: #fff;

        .head {
            display: flex;
            align-items: center;
            padding: 5px 15px;

            .pic {
                height: 30px;
                width: 30px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .h1 {
                font-size: 17px;
                color: #333;
            }
        }

        .total {
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #333;
            font-size: 14px;
            background: #fafafa;
        }

        .fee {
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 18px 15px;

                &.bottom-border {
                    padding: 11px 15px;
                    border-bottom: 1px solid #eee;
                }
            }
        }

    }

    .pay-item {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        height: 50px;
        line-height: 50px;

        .jine {
            flex: 1;
            text-align: center;
            background: #fff;

            .heji {
                font-size: 16px;
                color: #333;
            }

            .price {
                font-size: 20px;
                color: #F13E27;
            }
        }

        .btn {
            flex: 1;
            text-align: center;
            background: #2493F1;
            color: #fff;
            font-size: 18px;
        }
    }
}
</style>